<template>
	<view class="wrap">
		<view class="tHeader">
			<g-header title="销售单详情" :hideRight="true"></g-header>
		</view>
		<view class="block">
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 28rpx;height: 29rpx;" src="../../static/images/icon-addsales-1.png">
						</image>
					</view>
					<text>客户</text>
				</view>
				<view class="item-R" v-if="orderInfo.saleslipCustomer">
					{{orderInfo.saleslipCustomer.name + ' '}}{{orderInfo.saleslipCustomer.tel || ''}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 21rpx;height: 30rpx;" src="../../static/images/icon-addsales-2.png">
						</image>
					</view>
					<text>地址</text>
				</view>
				<view class="item-R" v-if="orderInfo.saleslipAddress">
					{{orderInfo.saleslipAddress.provinceStr + orderInfo.saleslipAddress.cityStr + orderInfo.saleslipAddress.countyStr + orderInfo.saleslipAddress.address}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-3.png">
						</image>
					</view>
					<text>时间</text>
				</view>
				<view class="item-R">{{orderInfo.xsrq}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-4.png">
						</image>
					</view>
					<text>制单人</text>
				</view>
				<view class="item-R">{{zdUserInfo.name || ''}}</view>
			</view>
			<view class="item" @click="onSkipTap('storeInfo')">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-5.png">
						</image>
					</view>
					<text>店铺信息</text>
				</view>
				<view class="item-R app_arrow">查看</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-addsales-6.png">
						</image>
					</view>
					<text>备注</text>
				</view>
				<view class="item-R">
					{{orderInfo.remark || ''}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<view class="item-L_img">
						<image style="width: 30rpx;height: 30rpx;" src="../../static/images/icon-danhao.png">
						</image>
					</view>
					<text>单号</text>
				</view>
				<view class="item-R">{{orderInfo.saleslipCode}}</view>
			</view>
		</view>
		<view class="block" v-if="orderInfo.orderListMergeList && orderInfo.orderListMergeList.length > 0">
			<view class="goodsListHeader">商品列表</view>
			<view class="goodsItemWrap" v-for="(item, index) in orderInfo.orderListMergeList" :key="index">
				<view class="goodsItem">
					<view class="goodsItem-img">
						<image v-if="item.image" :src="item.image" mode=""></image>
						<text v-else class="app_flex-aicjcc">无图片</text>
					</view>
					<view class="goodsItem-main">
						<view class="goodsItem-title">{{item.product}}</view>
						<view class="goodsItem-mainB">
							<view class="goodsItem-mainB_L">
								<text>￥{{item.unitPrice}}/{{item.company}}</text>
								<text>（{{item.dws}}）</text>
							</view>
							<view class="goodsItem-mainB_R">货号：{{item.productId}}</view>
						</view>
					</view>
				</view>
				<view class="goodsDetail">
					<!-- 后端把 true和false都存为了字符串了 -->
					<view class="goodsDetail-header">{{item.cutt === 'true' ? '剪样' : '大货'}}</view>
					<view class="goodsDetail-main">
						<view class="goodsDetail-item" v-for="(val, idx) in item.colorList" :key="idx">
							<view class="goodsDetail-item_L">
								<view class="goodsDetail-item_img" v-if="val.colorUrl">
									<image :src="val.colorUrl" mode=""></image>
								</view>
								<view class="goodsDetail-item_title">
									<text>色号：</text>
									<text>{{val.color}}</text>
								</view>
							</view>
							<view class="goodsDetail-item_R">
								<text>￥{{val.unitPrice}}</text>
								<text>x{{val.quantity}}/{{val.company}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="item">
				<view class="item-L">
					<text>订单金额</text>
				</view>
				<view class="item-R">¥{{orderInfo.orderPrices}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>货拉拉费用</text>
				</view>
				<view class="item-R">
					￥{{orderInfo.hllPrices}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>合计人民币</text>
				</view>
				<view class="item-R">¥{{orderInfo.orderPrices/1 + orderInfo.hllPrices/1}}</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>已收款</text>
				</view>
				<view class="item-R">
					￥{{orderInfo.ysk}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>收款方式</text>
				</view>
				<view class="item-R" v-if="orderInfo.gathers">
					<text v-for="(item, index) in orderInfo.gathers"
						:key="index">{{index > 0 ? '，' : ''}}{{item.gatherType}}</text>
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>前期欠款</text>
				</view>
				<view class="item-R">￥{{orderInfo.preDebt || 0}}
				</view>
			</view>
			<view class="item">
				<view class="item-L">
					<text>总欠款</text>
				</view>
				<view class="item-R">
					￥{{orderInfo.arrears || 0}}
				</view>
			</view>
		</view>
		<view class="editSubmitBar">
			<view class="editSubmitBar-del" @click="onDelTap">
				<image src="../../static/images/icon-del.png"></image>
			</view>
			<view class="editSubmitBar-R">
				<view class="editSubmitBar-btn" @click="onSkipTap('addSalesOrder', 0)">再来一单</view>
				<view class="editSubmitBar-btn" @click="openPDF" v-if="orderInfo.typeCode > 0">查看PDF</view>
				<view class="editSubmitBar-edit" v-if="orderInfo.typeCode == 0 || orderInfo.typeCode == 1">
					<g-btn title="编辑" :customstyle="{width: '180rpx', height: '70rpx'}"
						@click="onSkipTap('addSalesOrder', 2)"></g-btn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				id: '',
				list: [1, 2, 3],
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
				showDatePicker: false,
				showPayTypePicker: false,
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				// orderInfo: {
				// 	customer: '',
				// 	addr: '广州市天河区体育西路',
				// 	date: '',
				// 	docMaker: '',
				// 	remark: '',
				// 	amount: 11000,
				// 	hllAmount: 500,
				// 	totalAmount: 11500,
				// 	hasPay: 10000,
				// 	payWay: 1,
				// 	earlyDebt: 1000,
				// 	totalDebt: 2500
				// }, // 销售单详情
				orderInfo: {},
				zdUserInfo: {}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getOrderInfo()
		},
		methods: {
			onSkipTap(type, params) {
				const urlObj = {
					customerList: '/pages/customerManagement/customerList?backType=1',
					docMaker: '/pages/salesManagerment/docMaker',
					storeInfo: '/pages/shopInfo/storeInfo',
					goodsClass: '/pages/commodityManagement/goodsClass?type=selectGoods',
					addSalesOrder: () => {
						if (params == 2) {
							if (this.orderInfo.typeCode == 2) {
								uni.showToast({
									title: '销售单已打印, 不可编辑',
									icon: 'none'
								})
								return
							}
							uni.redirectTo({
								url: `/pages/salesManagerment/addSalesOrder?pageType=2&orderInfo=${JSON.stringify(this.orderInfo)}`
							})
						} else {
							uni.redirectTo({
								url: `/pages/salesManagerment/addSalesOrder?pageType=0&orderInfo=${JSON.stringify(this.orderInfo)}`
							})
						}
					}
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			async openPDF() {
				uni.showLoading({
					title: 'PDF加载中...'
				})
				if (!this.orderInfo.pdfPath) {
					uni.hideLoading()
					uni.showToast({
						title: 'PDF不存在',
						icon: 'none'
					})
					return
				}
				try {
					const url = `${this.$g_config.requestUrl}${this.orderInfo.pdfPath}`
					console.log(url);
					const filename =
						`_downloads/bdh/${this.orderInfo.customerName}_${this.orderInfo.saleslipCode}.pdf`
					console.log(filename);
					await this.getAndRemoveFile(filename)
					await this.saveAndOpenFile(url, filename)
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: e.message || e.toString(),
						icon: 'none'
					})
				}
			},
			getAndRemoveFile(url) {
				return new Promise((resolve, reject) => {
					plus.io.resolveLocalFileSystemURL(url, (entry) => {
						console.log('entry', entry);
						entry.remove(function(e) {
							console.log('remove', e);
							resolve()
							// plus.console.log("Remove succeeded");
						}, e => {
							console.log('remove', e);
							reject('打开失败')
							// alert(e.message);
						});
					}, (e) => {
						console.log('resolveLocalFileSystemURL', e);
						if (e.code == 1 || e.code == 14) {
							resolve()
						} else {
							reject('打开失败')
						}
					});
				})
			},
			saveAndOpenFile(url, filename) {
				return new Promise((resolve, reject) => {
					let dtask = plus.downloader.createDownload(url, {
							filename
						},
						(d, status) => {
							uni.hideLoading()
							//d为下载的文件对象
							if (status == 200) {
								//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
								let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
								plus.runtime.openFile(d.filename); //选择软件打开文件
								resolve()
							} else {
								//下载失败
								if (status == 404) {
									reject('PDF不存在')
								} else {
									reject('打开失败')
								}
								plus.downloader.clear(); //清除下载任务
							}
						})
					dtask.start();
				})
			},
			getOrderInfo() {
				this.$g_api.saleslipGetSaleslip({
					saleslipId: this.id
				}).then(({
					data
				}) => {
					data.orderListMergeList = this.transGoodsList(data.orderList)
					this.orderInfo = data
					this.getSaleslipAuthors(data.zdUser)
				})
			},
			transGoodsList(orderList) {
				let arr = []
				orderList?.forEach(item => {
					item.image = this.$g_util.concatRequestUrl(item.image)
					item.colorUrl = this.$g_util.concatRequestUrl(item.colorUrl)
					let idx = arr.findIndex(val => val.productId == item.productId && item.cutt === val.cutt)
					if (idx != -1) {
						arr[idx].colorList.push({
							color: item.color,
							colorUrl: item.colorUrl,
							unitPrice: item.unitPrice,
							company: item.company,
							quantity: item.quantity
						})
					} else {
						arr.push({
							productId: item.productId,
							image: item.image,
							product: item.product,
							unitPrice: item.unitPrice,
							company: item.company,
							dws: item.dws,
							cutt: item.cutt,
							colorList: [{
								color: item.color,
								colorUrl: item.colorUrl,
								unitPrice: item.unitPrice,
								company: item.company,
								quantity: item.quantity
							}]
						})
					}
				})
				return arr
			},
			onDelTap() {
				uni.showModal({
					title: '提示',
					content: '确定删除？',
					success: (res) => {
						if (res.confirm) {
							this.$g_api.saleslipDelSaleslip({
								saleslipId: this.id
							}).then(() => {
								uni.$emit('update-salesList')
								uni.showToast({
									title: '删除成功'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 800)
							})
						}
					}
				})
			},
			getSaleslipAuthors(zdUser) {
				this.$g_api.saleslipGetAuthors().then(({
					data
				}) => {
					this.zdUserInfo = data.find(item => item.id = zdUser) || {}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-top: calc(var(--status-bar-height) + 98rpx);
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom) + 20rpx);
	}

	.tHeader {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		border-bottom: 1px solid $g-border-color;
		z-index: 10086;
	}

	.tHeader-preview {
		font-size: 28rpx;
		color: #666;
	}

	.block {
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.item-L {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		color: #808080;
		margin-right: 40rpx;
	}

	.item-L_img {
		margin-right: 20rpx;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item-R {
		text-align: right;

		&.app_arrow {
			padding-right: 30rpx;

			&::after {
				width: 12rpx;
				height: 12rpx;
				right: 10rpx;
			}
		}

		input {
			text-align: right;
		}
	}

	.timePick-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 32rpx;
	}

	.timePick-header_cancel {
		color: #999;
	}

	.timePick-header_title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.timePick-header_confirm {
		color: $g-main-color;
	}

	.timePick-picker {
		width: 750rpx;
		height: 300rpx;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.timePick-pickerItem {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: bold;
	}

	.goodsListHeader {
		margin-top: -20rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.goodsItemWrap {
		padding-bottom: 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.goodsItem {
		display: flex;
		padding: 30rpx 20rpx 0;
	}

	.goodsItem-img {
		margin-right: 30rpx;
		width: 140rpx;
		height: 140rpx;
		font-size: 0;
		
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;

		}

		text {
			font-size: 28rpx;
			color: #777;
			width: 140rpx;
			height: 140rpx;
			background-color: $g-main-bg;
		}
	}

	.goodsItem-main {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goodsItem-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.goodsItem-mainB {
		display: flex;
		justify-content: space-between;
	}

	.goodsItem-mainB_L {
		text {
			&:first-child {
				color: #FF4C4C;
				font-size: 26rpx;
			}

			&:last-child {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.goodsItem-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.goodsDetail {
		padding: 0 20rpx;
		background-color: #fff;
	}

	.goodsDetail-header {
		line-height: 70rpx;
	}

	.goodsDetail-main {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #F7F7F7;
	}

	.goodsDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.goodsDetail-item_L {
		display: flex;
		align-items: center;
	}

	.goodsDetail-item_img {
		width: 50rpx;
		margin-right: 20rpx;
		font-size: 0;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 4rpx;
			background-color: skyblue;
		}
	}

	.goodsDetail-item_title {
		font-size: 24rpx;
		color: #333;
	}

	.goodsDetail-item_R {
		text {
			font-size: 24rpx;

			&:nth-child(1) {
				color: #FF4C4C;
			}

			&:nth-child(2) {
				color: #333;
			}
		}
	}

	.payTypePop {}

	.payTypePop-item {
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;
	}

	.payTypePop-cancel {
		line-height: 100rpx;
		border-top: 20rpx solid $g-border-color;
		text-align: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		text {
			display: block;
			line-height: 100rpx;
			width: 750rpx;
			border-bottom: 1px solid $g-border-color;
		}
	}

	.editSubmitBar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 690rpx;
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: content-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
		background-color: #fff;
		box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.editSubmitBar-del {
		width: 80rpx;
		height: 100rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.editSubmitBar-R {
		display: flex;
		align-items: center;
		// justify-content: space-around;
	}

	.editSubmitBar-btn {
		margin-left: 20rpx;
		width: 180rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 36rpx;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}

	.editSubmitBar-edit {
		margin-left: 20rpx;
	}
</style>
